<template>
<div id="app">
  <h1>{{msg}},学生姓名是：{{studentName}}</h1>
<!--  通过父组件给子组件提供函数类props实现-->
  <school :getSchoolName="getSchoolName"></school>
  <!--  通过父组件给子组件绑定一个自定义事件实现(第一种)-->
  <Student @atguigu="getStudentName " @demo="m1"></Student>
<!-- 一次使用-->
<!--  <Student @atguigu.once="getStudentName "></Student>-->
<!-- 通过父组件给子组件绑定一个自定义事件实现(第二种) -->
  <student ref="student" @click.native="show"></student>
</div>
</template>
<script>
import Student from "@/components/day7/Student";
import School from "@/components/day7/School";
export default {
  name:'App',
  components:{
   Student,
    School
  },
  data(){
    return{
      msg:'你好啊',
      studentName:''
    }
  },
  methods:{
    getSchoolName(name){
     console.log(name)
    },
    getStudentName(name){
      console.log(name)
      this.studentName=name
    },
    m1(){
      console.log('demo事件被触发了')
    },
    show(){
      alert(123)
    }
  },
  //自定义事件的第二种写法
  mounted() {
    setTimeout(()=>{
      this.$refs.student.$on('atguigu',this.getStudentName)
      //一次使用
      // this.$refs.student.$once('atguigu',this.getStudentName)
    },3000)
  }
}
</script>
<style>
#app{
  background-color: #cccccc;
  padding: 5px;
}
</style>